<template>
	<view class="person-add">
		<u-toast ref="uToast"></u-toast>
		<image src="http://118.31.238.190/home/img_enterprist_agent_add_1.png" mode="widthFix" class="person-add__top">
		</image>
		<view class="person-add__tip">请提供法人代表的身份证照片和信息</view>
		<u-form :model="form" ref="uForm" class="person-add__form">
			<u-form-item label="经营地区" label-width="200rpx" class="">

				<city :text="cityTip" @success="selectCity"></city>
			</u-form-item>
			<u-form-item label="详细地址" label-width="200rpx"><u-input v-model="form.businessAddress"
					placeholder="详细地址" /></u-form-item>

			<view class="person-add__tip">上传身份证照片(请保持照片清晰完整)</view>
			<view class="flex justify-between  u-margin-20">
				<view class="">
					<DeliverFileUpload :maxCount="1" :width="300" @success="onCardSuccess" @remove="onRemove">
					</DeliverFileUpload>
					<view class="">
						法人代表身份证照人像面
					</view>
				</view>

				<view class="">

					<DeliverFileUpload :maxCount="1" :width="300" @success="onSuccess" @remove="onRemove">
					</DeliverFileUpload>
					<view class="">
						法人代表身份证照国徽面
					</view>
				</view>
			</view>
			<u-form-item label="姓名" label-width="200rpx"><u-input v-model="form.legalName"
					placeholder="自动识别证件照或手动输入" /></u-form-item>
			<u-form-item label="身份证" label-width="200rpx"><u-input v-model="form.legalIdCardNo"
					placeholder="自动识别证件照或手动输入" /></u-form-item>
			<u-form-item label="身份证有效期" label-width="200rpx">
				<u-radio-group v-model="radio" class="person-add__date-group">

					<u-radio key="1" name="有效期" :disabled="false">
						有效期
						<view class="person-add__end-date"><u-input v-model="form.legalIdCardValidity" type="select"
								placeholder="结束时间" @click="showDate = true" />
							<u-picker mode="time" v-model="showDate" :params="dateParams"
								@confirm="checkDeadDate"></u-picker>
						</view>

					</u-radio>
					<u-radio key="2" name="永久长期">
						长期
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="联系人手机号" label-width="200rpx"><u-input v-model="form.contactsMobilePhone"
					placeholder="作为登录手机号,请慎重填写" /></u-form-item>
		</u-form>
		<u-button type="primary" :custom-style="customStyle" @click="nextStep()">下一步</u-button>
	</view>
</template>

<script>
	import city from "../components/city/city.vue";
	import DeliverFileUpload from "@/components/DeliverFileUpload/DeliverFileUpload.vue";
	export default {
		components: {
			city,
			DeliverFileUpload,
		},
		data() {
			return {
				customStyle: {
					// 注意驼峰命名，并且值必须用引号包括，因为这是对象
					backgroundColor: '#9D60FF',
					margin: '20rpx'
				},
				cityTip: "省/市/区",
				showCity: false,
				showDate: false,
				dateParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				form: {
					agentName: '',
					provinceCode: "",
					cityCode: "",
					areaCode: "",
					businessAddress: '',
					legalIdCardValidity: "", //永久传0
					idCardFaceImg: "", //人像
					idCardNationalEmblemImg: "",
					legalName: "", //个人:负责人姓名.企业:法人姓名 
					legalIdCardNo: "",
					contactsMobilePhone: ""
				},
				fileList: [],
				radio: "有效期",
				ocrParam: {
					"path": "",
					"ocrType": "ID_CARD_FRONT"
				}

			};
		},
		methods: {
			selectCity(Object) {
				console.log("Object=" + JSON.stringify(Object))
				this.form.provinceCode = Object.accountProvince;
				this.form.cityCode = Object.accountCity;
				this.form.areaCode = Object.accountArea;
			},
			checkDeadDate(e) {
				console.log("e=" + JSON.stringify(e))
				this.form.legalIdCardValidity = e.year + e.month + e.day;
			},
			onRemove(index) {
				this.fileList.splice(index, 1);

			},
			onSuccess(filePath) {

				this.fileList.push(filePath);
				this.form.idCardNationalEmblemImg = filePath;
			},
			onCardSuccess(filePath) {

				this.fileList.push(filePath);
				this.form.idCardFaceImg = filePath;
				//0cr接口
				this.getOcrRead(filePath);
			},
			getOcrRead(filePath) {
				const _that = this;
				_that.ocrParam.path = filePath;
				this.$zx.common_api.getOCRRead(this.ocrParam).then((data) => {

					console.log("data=" + JSON.stringify(data.words_result))
					if (data.words_result) {
						_that.form.legalName = data.words_result.姓名.words;
						_that.form.legalIdCardNo = data.words_result.公民身份号码.words;
					}
				});
			},
			nextStep() {
				const _that = this;


				if (!_that.form.provinceCode) {
					uni.$zx.msg("请选择经营地区", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.businessAddress) {
					uni.$zx.msg("请输入详细地址", {
						duration: 4000,
					});
					return;
				}
				if (_that.fileList.length < 2) {
					uni.$zx.msg("请上传身份证照片", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.legalName) {
					uni.$zx.msg("请输入姓名", {
						duration: 4000,
					});
					return;
				}
				if (!_that.form.legalIdCardNo) {
					uni.$zx.msg("请输入身份证号", {
						duration: 4000,
					});
					return;
				}
				if (!_that.radio == "有效期") {
					if (!_that.form.legalIdCardValidity) {
						uni.$zx.msg("请选择身份证有效期", {
							duration: 4000,
						});
						return;
					}

				} else {
					_that.form.legalIdCardValidity = "0";
				}
				if (!_that.form.contactsMobilePhone) {
					uni.$zx.msg("请输入联系人手机号", {
						duration: 4000,
					});
					return;
				}
				console.log("param=" + JSON.stringify(_that.form));
				this.$u.route({
					url: 'packageC/pages/business/addCompanySecond',
					params: {
						"basicForm": encodeURIComponent(JSON.stringify(_that.form))
					}
				})




			}
		}
	};
</script>

<style scoped lang="scss">
	.person-add {
		background-color: white;

		&__top {
			width: 100%;
		}

		&__tip {
			background-color: #f6f6f6;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 20rpx;
			font-size: 12px;
		}

		&__form {
			background-color: white;

		}

		&__date-group {
			display: flex;
			flex-direction: column;
		}

		&__end-date {
			width: 200rpx;
			margin-left: 20rpx;
			display: inline-block;
		}
	}
</style>